<template>
  <div class="filter-group-wrapper">
    <slot></slot>

    <ul v-if="localTags.length > 0" class="checked-tags">
      <span class="label">已选条件: </span>
      <div class="tags-wrapper">
        <div v-for="tag in localTags" :key="tag.label" class="tags-item">
          <span class="">{{ getTagsLabel(tag) }}</span>
          <i class="el-icon-close" @click="handleClose(tag)" />
        </div>
      </div>
      <span class="clear" @click="handleClear">清空</span>
    </ul>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
export default Vue.extend({
  components: {},
  props: {
    tags: {
      type: Array,
      default: () => [],
    },
    filters: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {}
  },
  computed: {
    localTags: {
      get() {
        return this.tags.filter((d) => d.checked.length > 0)
      },
      set(val) {
        this.$emit('update:tags', val)
      },
    },
  },
  watch: {
    tags() {
      this.$emit('update:filters', this.localTags)
    },
  },
  methods: {
    getTagsLabel(tag) {
      return tag.checked.map((d) => d.label).join('，')
    },
    handleClose(tag) {
      this.$emit('onCloseTag', tag)
    },
    handleClear() {
      this.localTags.forEach((tag) => {
        this.$emit('onCloseTag', tag)
      })
    },
  },
})
</script>
<style lang="scss" scoped>
.filter-group-wrapper {
  @apply bg-white p-4 rounded-md text-[16px] text-[#898faa];

  .checked-tags {
    @apply flex items-center space-x-4 border-t-2 border-dashed mb-0 h-[62px];
  }

  .tags-wrapper {
    @apply flex items-center flex-1 space-x-4 text-[#373C51] flex-wrap;
  }

  .tags-item {
    @apply relative
            border-[1px] border-gray-200
            pl-2
            pr-6
            py-[2px]
            text-[14px]
            max-w-[180px]
            truncate;
  }

  .el-icon-close {
    @apply absolute
            right-1
            top-[6px]
            text-[#898faa]
            cursor-pointer
            hover:scale-125;
  }

  .clear {
    @apply text-[16px] text-[#898faa] cursor-pointer;
  }
}
</style>
